<!doctype html>
<html>
   <head>
      <title>humane.js</title>
      <link href='themes/Ubuntu_v2.css' rel='stylesheet' type='text/css'>
      <link href='themes/Ubuntu_Mono.css' rel='stylesheet' type='text/css'>
      <link href='themes/Cabin+Sketch700_v2.css' rel='stylesheet' type='text/css'>
      <style>
         body {
            font-family: Ubuntu, sans-serif;
            padding: 80px;
            background-color: #f0f0f0;
         }
         h1,h3 {
            font-family: 'Cabin Sketch', serif;
            text-shadow: -1px 0px 1px #aaa;
         }
         h1 {
            font-size: 4em;
            margin: 0
         }
         h3 {
            font-size: 2em;
            margin: 0
         }
         select {
            font-size: 0.8em;
         }
         a {
            text-decoration: none;
            color: #a13;
            font-weight: bold;
         }
         a:hover {
            text-decoration: underline;
         }
         pre {
            font-family: "Ubuntu Mono";
            font-size: 0.9em;
            background-color: #fff;
            border: 1px solid #aaa;
            border-radius: 6px;
            padding: 10px;
            text-decoration: none;
         }
         blockquote {
            font-size: 0.8em
         }
      </style>
      <meta http-equiv="X-UA-Compatible" content="IE=Edge">
      <link id='theme' rel='stylesheet' href='themes/libnotify.css'/>
      <script src='humane.js'></script>
   </head>
   <body>
      <a href="http://github.com/wavded/humane-js"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
      <h1>humane.js</h1>
      <p>
         <strong>A simple, modern, framework-independent, well-tested, unobtrusive, notification system.</strong>
         <br/>Utilizes CSS transitions when available, falls back to JS animation when not.  Includes mobile support.
      </p>
      <h3>Select A Theme: 
         <select onchange='document.getElementById("theme").href = "themes/" + this.options[this.selectedIndex].value + ".css"'>
            <option selected>libnotify</option>
            <option>bigbox</option>
            <option>boldlight</option>
            <option>jackedup</option>
            <option>original</option>
         </select>
      </h3>
      <p>Click a code sample below to see it in action:</p>

      <a href='javascript:humane.log("Welcome Back")'>
         <pre>humane("Welcome Back");
humane.log("Welcome Back");</pre>
      </a>
      <a href="javascript:humane.info('Record  has been updated');">
         <pre>humane.info("Record &lt;b>392&lt;/b> has been updated");</pre>
      </a>
      <a href='javascript:humane.error("Invalid Username and/or Password")'>
         <pre>humane.error("Invalid Username and/or Password");</pre>
      </a>
      <a href='javascript:humane.success(["List","of","Items"])'>
         <pre>humane.success(["List","of","Items"]);</pre>
      </a>
      <a href='javascript:humane("The background color will change when finished",function(){document.body.style.backgroundColor="#6699FF"})'>
         <pre>humane("Second parameter takes a callback that's fired when finished", function(){
   document.body.style.backgroundColor="#6699FF";
});</pre>
      </a>
      <h3>Options</h3>
      <pre>humane.timeout = (number of milliseconds);</pre>
      <blockquote>
         <p>Sets the delay before a message fades out.</p>
         <p>
            Try It:
            <input type='radio' name='timeout' onclick='humane.timeout = 2500' checked> 2500 <small>(2s - default)</small>
            <input type='radio' name='timeout' onclick='humane.timeout = 5000'> 5000 <small>(5s)</small>
            <input type='radio' name='timeout' onclick='humane.timeout = 500'> 500 <small>(0.5s)</small>
            <input type='radio' name='timeout' onclick='humane.timeout = 0'> 0 <small>(no timeout)</small>
         </p>
      </blockquote>
      <pre>humane.waitForMove = (true|false);</pre>
      <blockquote>
         <p>Wait for mouse, keyboard, or touch action to be taken before clearing message (after timeout)</p>
         <p>
            Try It:
            <input type='radio' name='waitformove' onclick='humane.waitForMove = true'> true
            <input type='radio' name='waitformove' onclick='humane.waitForMove = false' checked> false <small>(default)</small>
         </p>
      </blockquote>
      <pre>humane.clickToClose = (true|false);</pre>
      <blockquote>
         <p>Click or touch the notification to close</p>
         <p>
            Try It:
            <input type='radio' name='clickToClose' onclick='humane.clickToClose = true'> true
            <input type='radio' name='clickToClose' onclick='humane.clickToClose = false' checked> false <small>(default)</small>
         </p>
      </blockquote>

      <h3>Customizing Options Per Type</h3>
      <p>All the options are also customizable by type.  For example, say you wanted errors to always stay up until the user moved the mouse.</p>
      <pre>
humane.error.waitForMove = true;
humane.error('Stays up a until mouse move');
humane.log('Gets removed after timeout');</pre>
      <p>Or say you want success messages to remain up forever unless a user clicks them:</p>
      <pre>
humane.success.timeout = 0;
humane.success.clickToClose = true;
humane.success('Will stay up forever until click or humane.remove()');
humane.remove(); // force remove</pre>
      <p>Or you want all messages to have 3s timeout (3000) but 'info' messages to have shorter timeout of 1s (1000)</p>
      <pre>
humane.timeout = 3000;
humane.info.timeout = 1000;
humane.log('I'm up for 3 seconds');
humane.info('I'm up for 1 second');</pre>

      <h3>Creating a Custom Notifier</h3>
      <p>You can create your own custom notifier that takes a type plus any of the options listed above (w/ those defaults unless overridden)</p>
      <pre>
var error = humane.create({ type: 'error', waitForMove: true });
error('Yikes');</pre>

      <h3>Events</h3>
      <p>humane.js provides some events more intended for plumbing purposes, say you wanted to implement stacking or logging:</p>
      <pre>humane.on(<b>'add'</b>, function(type, message) { ... });</pre>
      <blockquote>
         <p>Fires when a new message is added to the queue</p>
      </blockquote>
      <pre>humane.on(<b>'show'</b>, function(type, message) { ... });</pre>
      <blockquote>
         <p>Fires when a message is about to be shown</p>
      </blockquote>
      <pre>humane.on(<b>'hide'</b>, function(type, message) { ... });</pre>
      <blockquote>
         <p>Fires when a message is hidden and removed</p>
      </blockquote>

      <h3>Browser Support</h3>
      <p>Uses CSS Transitions where available otherwise falls back to JS animation, degrades gracefully.</p>
      <ul>
         <li>Internet Explorer 7+</li>
         <li>Firefox 3+</li>
         <li>Chrome 9+</li>
         <li>Safari 3+</li>
         <li>Opera 10+</li>
         <li>iOS 4+</li>
         <li>Android 2+</li>
      </ul>

      <h3>Create A Custom Theme</h3>
      <p>Humane is easily themable using <a href="http://learnboost.github.com/stylus">Stylus</a>.  There are currently a few <a href='https://github.com/wavded/humane-js/wiki/Themes'>themes</a>, but I hope this grows.  Send me a pull request and update the wiki with your favorite look and feel.</p>


      <h3>Download and Usage</h3>
      <p>Visit <a href='http://github.com/wavded/humane-js'>github page</a> to download and get more details.</p>
   </body>
</html> 
